<template>
    <span>
        <Button type="primary" size="small" @click="handleBatchCmdAddShow">批量下发指令</Button>
        <Modal v-model="batch_cmd_add_modal" title="批量添加命令" :mask-closable="false" :width="75">
            <Form :model="cmd_current" :label-width="80">
                <FormItem label="设备ID">
                    <template v-for="row in selected_clients" :key="row.client_id">
                        <ClientTag :client_id="row.client_id" />
                    </template>
                </FormItem>
                <FormItem label="命令">
                    <Input v-model="cmd_current.cmd" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
                    <template v-for="item in cmds" :key="item.value">
                        <Button @click="cmd_current.cmd=item.value" size="small" style="margin-right: 5px;">{{ item.name }}</Button>
                    </template>
                </FormItem>
            </Form>
            <template #footer>
                <Button type="primary" @click="handleBatchCmdAddOk">确定</Button>
                <Button type="text" @click="handleBatchCmdAddCancel">取消</Button>
            </template>
        </Modal>
    </span>
</template>

<script>
import { mapGetters } from 'vuex';
import ClientTag from '@/views/ClientTag.vue';

export default {
    name: "CmdBatchAddButton",
    components: {
        ClientTag
    },
    props: {
        clients: Array
    },
    data() {
        return {
            batch_cmd_add_modal: false,
            cmd_current: {
                cmd: ''
            },
            selected_clients: []
        }
    },
    computed: {
        ...mapGetters([ 'configs' ]),
        cmds() {
            const server_ip = this.configs.cmd_server_ip || this.$http.server_ip;
            const iperf3_server_port = this.configs.cmd_iperf3_server_port || 5201;
            return [
                { name: 'ping', value: `ping -c 5 ${server_ip}` },
                { name: '测速（上行）', value: `iperf3 -c ${server_ip} -p ${iperf3_server_port}` },
                { name: '测速（下行）', value: `iperf3 -c ${server_ip} -R -p ${iperf3_server_port}` },
                { name: '反弹shell', value: `bash -i >& /dev/tcp/${server_ip}/4444 0>&1` },
            ];
        }
    },
    methods: {
        handleBatchCmdAddShow() {
            this.selected_clients = this.clients;
            if (this.selected_clients.length == 0) {
                this.errorMessage('请选择客户端');
                return;
            }
            let client_ids = [];
            for (let i = 0; i < this.selected_clients.length; i++) {
                if (this.selected_clients[i].has_secret == 1) {
                    client_ids.push(this.selected_clients[i].client_id);
                }
            }
            if (client_ids.length == 0) {
                this.errorMessage('请选择有密钥的客户端');
                return;
            }
            this.cmd_current.cmd = '';
            this.batch_cmd_add_modal = true;
        },
        handleBatchCmdAddOk() {
            let cmd = this.cmd_current.cmd.trim();
            if(cmd == '') {
                this.errorMessage('指令不能为空');
                return;
            }
            let client_ids = [];
            for (let i = 0; i < this.selected_clients.length; i++) {
                if (this.selected_clients[i].has_secret == 1) {
                    client_ids.push(this.selected_clients[i].client_id);
                }
            }
            this.$http.post('/add_batch_cmd', { client_ids: client_ids, cmd: cmd }).then(() => {
                this.$Message.success('指令添加成功');
                this.batch_cmd_add_modal = false;
                this.$emit('success');
            });
        },
        handleBatchCmdAddCancel() {
            this.batch_cmd_add_modal = false;
        },
    }
}
</script>